<html>

<body>
<style>
  #mask{
    display:none;
    position:absolute;
    left:0px;
    top:0px;
    width:100vw;
    height:100vh;
    background:rgb(0,0,0,0.5)
  }
  #form{
    width:100px;
    height:100px;
    position:absolute;
    left:50vw;
    top:50vh;
    margin-left:-50px;
    margin-top:-50px;
    background:white;
    text-align:center;
  }
  #closeMe{
    width:50px;
    height:50px;
    margin-top:25px;
  }
</style>


<input type="button" value="弹窗" id="but">
<div id="mask">
  <div id="form">
    <input type="button" value="关闭" id="closeMe">
  </div>
</div>

<script>
  var g = function(v){
    return document.getElementById(v)
  }
  g("but").onclick = function(){
    g("mask").style.display = "block";
  }
  g("closeMe").onclick = function(){
    g("mask").style.display = "none";
  }
  
  
</script>
</body>
</html>